<template>
    <div class="lang">
        <div class="switch" @click="handleClick(key)">{{ language }}</div>
    </div>
</template>
<script>
import { Popover, Button } from "fawkes-mobile-lib";
import { loadLanguageAsync } from "@/utils/locale/index"; //引入获取系统语言的方法
export default {
    components: {
        [Popover.name]: Popover,
        [Button.name]: Button,
    },
    created() {
        this.$i18n.locale = this.$storage.get('i18nLocale')
        this.actions.map((item) => {
            if (item.key == this.$i18n.locale) {
                this.onSelect(item);
            }
        });
    },
    computed: {
        language() {
            if (this.key == 'zh' && this.locale == 'zh-CN') {
                return '中'
            } else {
                return 'EN'
            }
        }
    },
    data() {
        return {
            key: this.$storage.get('i18nLocale'),
            locale: this.$storage.get('i18nLocaleKey'),
            actions: [
                { text: "简体中文", locale: "zh-CN", key: "zh" },
                { text: "English", locale: "en-US", key: "en" },
            ],
        };
    },
    methods: {
        onSelect(action) {
            this.$i18n.locale = action.key;
            this.key = action.key
            this.locale = action.locale;
            loadLanguageAsync(action.key, action.locale, this);
        },
        handleClick(val) {
            this.actions.forEach((item) => {
                if (item.key != val) {
                    this.$i18n.locale = item.key;
                    this.key = item.key
                    this.locale = item.locale;
                    loadLanguageAsync(item.key, item.locale, this);
                }
            })
        }

    },
};
</script>
<style lang="less" scoped>
.lang {
    position: fixed;
    top: 20px;
    right: 5px;
}

.switch {
    height: 32px;
    width: 50px;
    font-size: 28px;
    color: #ccc;
}
</style>
  